import React from 'react';
import '@/assets/css/collect.css'
import { HeartFill } from 'antd-mobile-icons'

const Component = () =>
{
    let [list, SetList] = React.useState([])
    let [collcet, SetCollcet] = React.useState([])
    let [page, SetPage] = React.useState(1)
    let [hasMore, SethasMore] = React.useState(true)

    //上拉加载
    const loadMore = async () =>
    {
        ListData()
    }

    // 下拉刷新的方法
    const onRefresh = async () =>
    {
        SetPage(1)
        SethasMore(true)
        SetList([])
        ListData()
    }

    //请求列表数据
    const ListData = async () =>
    {
        //封装数据
        var data = {
            busid: React.Business.id,
            page: page
        }

        var result = await React.HTTP.post('/room/collcets', data)

        if(result.code == 1)
        {
            SethasMore(true)
            SetPage(page + 1)
            SetList(list.concat(result.data))
        }else
        {
            SethasMore(false)
            return false
        }
    }

    // 收藏
    const Collcet = async (roomid:any) =>
    {
        if(!React.Business.id)
        {
            React.error('请先登录', () => {})
            return false
        }

        //组装数据
        var data = {
            roomid: roomid ? roomid : '',
            busid: React.Business.id
        }
        // console.log(data)
        // return false

        //发请求
        var result = await React.HTTP.post('/room/collcet', data)

        if(result.code == 0)
        {
            React.error(result.msg, () => {})
        }else
        {
            SetCollcet(list.concat(result.data))

            React.UI.Toast.show({
                icon: 'success',
                content: result.msg
            })

            onRefresh()
        }
    }
    // console.log(list)

    return (
        <>
            <React.UI.NavBar 
                style={{background: `rgb(55, 68, 134)`, color:'#fff'}}
                back='返回' 
                onBack={React.back}
            >收藏列表</React.UI.NavBar>

            <React.UI.PullToRefresh onRefresh={onRefresh}>
                <div className="collectlist">
                    {list.map((item:any, key) => 
                        <div className="item" key={key}>
                            <div className="collect">
                                <React.UI.Space onClick={() => Collcet(item.roomid)} wrap style={{ fontSize: 36 }}>
                                    <HeartFill color='red' />
                                </React.UI.Space>
                            </div>
                            <React.Router.Link to={`/room/info?rid=${item.roomid}`}>
                                <div className="images">
                                    <div className="swipers">
                                        <img src={item.room.thumb_text} alt="" />
                                    </div>
                                    <div className="title">{item.room.name}</div>
                                </div>
                                <div>
                                    <div className="item_bot">
                                        <div className="font">
                                            <span className="price">￥{item.room.price}/晚</span>
                                            <span className="market_price">￥{(item.room.price*1.20).toFixed(0)}/晚</span>
                                        </div>
                                        <div className="item_tips">{item.createtime_text}</div>
                                    </div>
                                </div>
                            </React.Router.Link>
                        </div>
                    )}
                </div>
            </React.UI.PullToRefresh>

            <React.UI.InfiniteScroll loadMore={loadMore} hasMore={hasMore} threshold={0} />


        </>
    )
}

export default Component